

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Seam Carve</title>
<link rel="stylesheet" href="css/html5demos.css">
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery.jshowoff.min.js"></script>
<script type="text/javascript"
	src="./js/jquery.simplemodal.1.4.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.simplemodal.js"></script>
<style type="text/css">
#holder {
	border: 10px dashed #ccc;
	width: 400px;
	min-height: 300px;
	margin: 20px auto;
}

#finalHolder {
	border: 10px dashed #ccc;
	width: 400px;
	min-height: 300px;
	margin: 20px auto;
}

.fileInput {
	cursor: pointer;
	height: 100%;
	position: relative;
	top: 0;
	right: 0;
	z-index: 2;
	/*This makes the button huge. If you want a bigger button, increase the font size*/
	font-size: 13px;
	/*Opacity settings for all browsers*/
	/* opacity: 0.7;
    -moz-opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0.7) */
}

#holder.hover {
	border: 10px dashed #0c0;
}

#holder img {
	display: block;
	margin: 10px auto;
}

#holder p {
	margin: 10px;
	font-size: 14px;
}

progress {
	width: 100%;
}

progress:after {
	content: '%';
}

.fail {
	background: #c00;
	padding: 2px;
	color: #fff;
}

.hidden {
	display: none !important;
}
</style>
</head>
<body>

		<header>
			<h1 align="center">Seam Carve</h1>
		</header>

		<form enctype="multipart/form-data"
			action="<%=request.getContextPath()%>/Main" method="post">
			<table>
				<tr>
					<td align="center" width="40%"><table>
							<tr>
								<td><b>Choose the file To Upload:</b>
								</td>

								<td><input class="fileInput" name="file" type="file"
									id="files" style="width: 192px" />
								</td>
							</tr>
							<tr>
								<td><b>SeamEnlarge</b>
								</td>

								<td><select id="seamEnlarge">
										<option value="Yes">Yes</option>
										<option value="No" selected="selected">No</option>
								</select>
								</td>
							</tr>
							<tr>
								<td align="left"><b>Target Image Height X Width</b></td>
								<td>
									<div id="enlarge">
										<input name="height" type="text" id="height" maxlength="3"
											size="12" /> X <input name="width" type="text" id="width"
											maxlength="3" size="11" /> <select id="resize">
											<option value="pixcel" selected="selected">px</option>
											<option value="percentage">%</option>
										</select>
									</div>
								</td>
							</tr>
							<tr>
								<td align="left"><b>Seam to be removed Horizontal X
										Vertical</b></td>
								<td nowrap="nowrap">
									<div id="remove">
										<input name="sHeight" type="text" id="sHeight" maxlength="3"
											size="12" /> X <input name="sWidth" type="text" id="sWidth"
											maxlength="3" size="11" /> <select id="resize">
											<option value="pixcel" selected="selected">px</option>
											<option value="percentage">%</option>
										</select>
									</div>
								</td>
							</tr>
						</table>
					</td>
					<td align="center" width="20%">&nbsp;</td>
					<td align="center" width="40%"><b>Processed Image</b>
					</td>
				</tr>
				<tr>
					<td align="left" width="40%"><div id="holder"></div> <br>
						<progress id="uploadprogress" max="100" value="0">0</progress></td>

					<td align="center" width="20%">
						<table>
							<tr>
								<td>
								<a id=energy><input type="image" src="./image/energyImage.png" alt="send" title="Send Image"/></a>
								<%--<input type="button" id="process" value="Energy Image" /> --%>
								</td>
							</tr>
							<tr>
								<td>
							<a id="seam"><input type="image" src="./image/seamImage.png"
									alt="send" title="Send Image" style="width: 172px" /> </a>
								<%--<input type="button" id="process" value="Seam Image" /> --%>
								</td>
							</tr>
							<tr>
								<td>
								<a id="final"><input type="image" src="./image/finalImage.png"
									alt="send" title="Send Image" style="width: 170px" /> </a>
								<%--<input type="button" id="process" value="Final Image" /> --%>
								</td>
							</tr>
						</table></td>
					<td align="right" style="width: 644px" width="40%"><div
							id="finalHolder"></div></td>
				</tr>

				<tr>
					<td align="center">
						<table>
							<tr>
								<td></td>
							</tr>
							<tr>
								<td>
								<a id="submit"><input type="image" src="./image/sendImage.png" alt="send" title="Send Image"/></a>
								<%-- <input type="button" id="submit" value="Send File" /><input
									type="button" id="clear" value="Clear Image" />--%>
									<a id="clear"><input type="image" src="./image/clearImage.png" alt="send" title="Send Image"/></a>
								</td>
							</tr>
						</table></td>
					<td align="center">
					<%--<input type="button" id="slideShow"
						value="Play Slide Show" />--%>
					<a id="slideShow"><input type="image" src="./image/playslide.png" alt="send" title="Send Image"/></a>
						
					</td>

					<td align="center"><!-- <input type="button" id="saveImage"
						value="Save Image" /> -->
					</td>
				</tr>
			</table>
			<div id="features"
				style="display: none; background-color: white; padding-top: 1px; padding-left: 1px; padding-right: 1px;">
				<div align="center">
					<img id="slide1" src="./image/sampleEnergy.png"  alt="" /><br>
					<input  type="button" id="closeSlide" value="Close Slide" onclick="javascript:$.modal.close();
					"/>
				</div>
				<div align="center">
					<img id="slide2" src="./image/sampleSeam.png"  alt="" /> <br>
					<input type="button" id="closeSlide" value="Close Slide" onclick="javascript:$.modal.close();
					$('#features').hide();"/>
				</div>
				<div align="center">
					<img id="slide3" src="./image/sampleFinish.png"  alt="" /><br>
					<input type="button" id="closeSlide" value="Close Slide" onclick="javascript:$.modal.close();
					$('#features').hide();"/>
				</div>

				<script type="text/javascript">
				$("#features").jshowoff({
						effect : "fade",
						controls : false,
						links : false,
						speed : 3000,
						hoverPause : true
					});
					</script>
			</div>
			<article>

				<p id="upload" class="hidden">
					<label>Drag &amp; drop not supported, but you can still
						upload via input field:<br> </label>
				</p>
				<p id="filereader">File API &amp; FileReader API not supported</p>
				<p id="formdata">XHR2's FormData is not supported</p>
				<p id="progress">XHR2's upload progress isn't supported</p>


			</article>
			<script type="text/javascript"
				src="<%=request.getContextPath()%>/js/seam.js"></script>
		</form>
</body>
</html>